import './gjeq.scss'
import 'swiper/css'
import 'swiper/css/effect-fade'
import { App, Tooltip } from 'antd'
import { useState, lazy, Suspense } from 'react'
import { Swiper, SwiperSlide } from 'swiper/react'
import { Autoplay, EffectFade } from 'swiper/modules'
import { useMount, useTitle, useFavicon } from 'ahooks'

import { getBaseData } from '../common'
import { CommonUrl } from '../../Config'
import { Decrypt } from '../../Utils/IndexedDB'

import { modelStore } from '../../Config/zustand'

const ImageList = [
    'https://image.ljkjkf.com/intellisiteSystem_TieKe/jtgj/BackA01.png',
    'https://image.ljkjkf.com/intellisiteSystem_TieKe/jtgj/BackA02.jpg',
    'https://image.ljkjkf.com/intellisiteSystem_TieKe/jtgj/BackA03.jpg',
    'https://image.ljkjkf.com/intellisiteSystem_TieKe/jtgj/BackA04.jpg',
    'https://image.ljkjkf.com/intellisiteSystem_TieKe/jtgj/BackA05.jpg',
    'https://image.ljkjkf.com/intellisiteSystem_TieKe/jtgj/BackA06.jpg',
]

const GJET = () => {
    const { updateModel } = modelStore()
    const { notification } = App.useApp()
    const [SignUpPage, setSignUpPage] = useState()
    const TITLE = sessionStorage.getItem('TITLE')
    const IMAGE_URL = sessionStorage.getItem('IMAGE')
    useTitle(TITLE)
    useFavicon(IMAGE_URL + 'Ico.ico')
    useMount(async () => {
        const data = await getBaseData(notification)
        if (data) {
            localStorage.setItem('project', data)
            const { theme } = await Decrypt(data)
            const login = lazy(() => import(`../../Page/SignPage/${theme.signPage}.jsx`))
            setSignUpPage(login)
        }
    })


    const onScan = () => {
        updateModel({ title: '微信登录...', type: 'SignUpLoading', width: 480, data: { ThirdParty: 'weChat' } })
    }

    return (
        <Suspense>
            <div className='GJEQPage'>
                <div className='BackImage'>
                    <Swiper
                        modules={[Autoplay, EffectFade]}
                        loop={true}
                        speed={500}
                        effect="fade"
                        spaceBetween={30}
                        allowTouchMove={false}
                        autoplay={{ delay: 5000, disableOnInteraction: false }}
                    >
                        {ImageList.map((url, index) =>
                            <SwiperSlide key={index}>
                                <img src={url} alt="" />
                            </SwiperSlide>
                        )}
                    </Swiper>
                </div>
                <div className='Title'>
                    <img src={IMAGE_URL + 'logo.png'} alt="1" />
                    <div>交投工建数智建设平台</div>
                </div>
                <div className='SignUp'>
                    <img src={IMAGE_URL + 'LoginSign.png'} alt="1" />
                    <div>
                        <div>平台登录</div>
                        <div>多平台账号互通，更加便捷、方便。</div>
                        {/* <SignPage btnText={btnText} /> */}
                        {SignUpPage && <SignUpPage btnText='登录' />}
                        <Tooltip title="微信扫码">
                            <img src={CommonUrl + 'scan.png'} alt="" onClick={() => onScan()} />
                        </Tooltip>
                    </div>
                </div>
                <div className='Tips'>严肃法纪，严厉打击泄露国家秘密的违法行为！</div>
            </div>
        </Suspense>
    );
};

export default GJET;